/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 * <p>
 * http://www.apache.org/licenses/LICENSE-2.0
 * <p>
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
 .contacts {
    @include media-breakpoint-down(xs) {
      margin: 0 -5px;
      & > [class*="col-"] {
        padding: 0 5px;
      }
    }
  }
  
  .contacts__item {
    background-color: $white;
    border-radius: $border-radius;
    box-shadow: $card-shadow;
    padding: 1.8rem 1.5rem 1.15rem;
    text-align: center;
    margin-bottom: $grid-gutter-width-base;
  
    &:hover {
      .contacts__img > img {
        transform: scale(1.1);
      }
    }
  
    @include media-breakpoint-down(xs) {
      margin-bottom: 10px;
    }
  }
  
  .contacts__img {
    display: block;
    margin-bottom: 1.1rem;
  
    & > img {
      max-width: 120px;
      max-height: 120px;
      width: 120px;
      height: 120px;
      width: 100%;
      border-radius: 50%;
      @include transition(transform 300ms);
    }
  }
  
  .contacts__info {
    strong,
    small {
      @include text-overflow();
      display: block;
    }
  
    strong {
      font-weight: $font-weight-bold;
    }
  
    small {
      font-size: 0.9rem;
      color: $text-muted;
    }
  }
  
  .contacts__btn {
    margin-top: 10px;
    font-weight: $font-weight-bold;
    text-transform: uppercase;
    border: 0;
    line-height: 100%;
    background-color: transparent;
    color: #2196F3;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: $border-radius;
    border: 1px dashed;
    @include transition(background-color 300ms, color 300ms);
  
    &:hover {
      background-color: $gray-lighter;
      color: $headings-color;
    }
  }